<template>
  <div id="selfHelp" v-loading="mainLoading">
    <div class="logo-title">宝山看守所</div>
    <div class="big-title">欢迎使用提审会见自助登记系统</div>
    <div class="menu-container">
      <div v-for="menu in menus" class="menu-content" :key="menu.name" @click="showMenu(menu.name)">
        <div :class="'menu-item '+menu.class" >
          <div class="menu-icon">
            <img :src="menu.icon"/>
          </div>
          <div class="menu-title">{{menu.title}}</div>
        </div>
      </div>
    </div>
    <el-dialog width="800px" :title="menus[0].title" :close-on-click-modal="false" :visible="activeMenuName === menus[0].name" @close="closeMenu1">
      <Register ref="register" :active-menu-name.sync="activeMenuName" :main-loading.sync="mainLoading" :visitor-types="visitorTypes" :rooms="rooms" :room-type-constants="roomTypeConstants"></Register>
    </el-dialog>
    <el-dialog fullscreen :title="menus[1].title" :close-on-click-modal="false" :visible="activeMenuName === menus[1].name" @close="activeMenuName = ''">
      <RoomState ref="roomState" :rooms="rooms" :room-type-constants="roomTypeConstants"></RoomState>
    </el-dialog>
    <el-dialog width="800px" :title="menus[2].title" :close-on-click-modal="false" :visible="activeMenuName === menus[2].name" @close="activeMenuName = ''">
      <InterviewerRecord :visitor-types="visitorTypes" v-if="activeMenuName === menus[2].name" :rooms="rooms" ref="interviewerRecord"></InterviewerRecord>
    </el-dialog>
  </div>
</template>
<script>
import Register from '../components/SelfHelp/Register'
import RoomState from '../components/SelfHelp/RoomState'
import InterviewerRecord from '../components/SelfHelp/InterviewerRecord'
export default {
  name: 'SelfHelp',
  components: { Register, RoomState, InterviewerRecord },
  data () {
    return {
      menus: [{
        title: '访客登记',
        name: 'register',
        class: 'menu-register',
        icon: require('../assets/SelfHelp/img/register.png')
      }, {
        title: '房间状态',
        name: 'room',
        class: 'menu-room',
        icon: require('../assets/SelfHelp/img/room.png')
      }, {
        title: '登记记录',
        name: 'record',
        class: 'menu-record',
        icon: require('../assets/SelfHelp/img/record.png')
      }, {
        title: '帮助',
        name: 'help',
        class: 'menu-help',
        icon: require('../assets/SelfHelp/img/help.png')
      }],
      activeMenuName: '',
      roomTypeConstants: {
        1: '民警讯问室',
        2: '律师会见室',
        3: '检察院讯问室',
        4: '民警/律师',
        5: '民警/检察院'
      },
      visitorTypes: [],
      rooms: [],
      mainLoading: false // 主界面加载层
    }
  },
  methods: {
    /**
     * 显示对应的功能窗口
     */
    showMenu (menuName) {
      this.activeMenuName = menuName
    },

    /**
     * 关闭登记窗口
     */
    closeMenu1 () {
      if (this.activeMenuName) {
        this.$confirm('关闭该窗口会清除所有已填写的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.register.step = 1
          this.activeMenuName = ''
          this.$refs.register.resetModel()
        })
      }
    },

    /**
     * 获取访客类型与房间信息
     */
    getBasicData () {
      this.mainLoading = true
      this.$http.POST('Interviewer:GetVisirtorTypes').then(res => {
        if (res.data.code === 200) {
          this.visitorTypes = res.data.rows
          return this.$http.POST('Interviewer:GetRooms')
        } else {
          this.$alert(res.data.msg, '提示', {
            confirmButtonText: '确定',
            callback: () => {
              this.$router.push('/login')
            }
          })
        }
      }).then(res => {
        this.$set(this, 'rooms', res.data.rows)
        this.mainLoading = false
      })
    },
    /**
     * 获取房间信息
     */
    getRooms () {
      this.mainLoading = true
      this.$http.POST('Interviewer:GetRooms').then(res => {
        this.$set(this, 'rooms', res.data.rows)
        this.mainLoading = false
      })
    }
  },
  created () {
    this.mainLoading = true
    this.getBasicData()
    this.$ws.CreateEvent('selfHelp', e => {
      const msg = JSON.parse(e.data)
      if (msg.code === this.MESSAGE_CODE.RELAY) {
        return
      }
      if (msg.msgType === this.MESSAGE_TYPE.ROOM_UPDATE) {
        this.getRooms()
      }
    })
  }
}
</script>
<style scoped>
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #selfHelp {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(141deg, #018cf1 0%, #6cc0fc 51%, #cee3fd 75%);
  }

  .logo-title {
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 28px;
    color: #eee;
  }

  .big-title {
    position: absolute;
    top: 96px;
    width: 100%;
    text-align: center;
    font-size: 60px;
    color: #eee;
  }

  .menu-container {
    position: absolute;
    width: 800px;
    height: 500px;
    left: calc(50% - 400px);
    top: 200px;
    display: flex;
    flex-wrap: wrap;
  }

  .menu-content{
    width: 50%;
  }
  .menu-icon {
    text-align: center;
    width: 70%;
    height: 70%;
    margin-left: 15%;
    margin-top: 20px;
  }

  .menu-icon > img {
    width: 100%;
    height: 100%;
  }

  .menu-item {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    margin-top: 50px;
    margin-left: 50px;
    transition: all .2s;
    border: 2px solid transparent;
  }
  .menu-item:hover{
    border-color: teal;
  }

  .menu-item.menu-register {
    background-image: linear-gradient(141deg, #ffe100 0%, #ffb900 51%, #ff7300 75%);
  }

  .menu-item.menu-room {
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  }

  .menu-item.menu-record {
    background-image: linear-gradient(141deg, #2cb5e8 0%, #00abd9 51%, #0b6daa 75%);
  }
  .menu-item.menu-help{
    background-image: linear-gradient(141deg, #9deacb 0%, #1dba74 51%, #159c5f 75%);
  }

  .menu-title {
    text-align: center;
    font-size: 36px;
    margin-top: 10px;
    color: #fff;
  }
  /deep/.el-dialog{
    border-radius: 5px;
  }
  /deep/.el-dialog__header{
    background-color: teal !important;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  /deep/.el-dialog__title{
    font-size: 14px !important;
    color: #eee !important;
  }
  /deep/.el-dialog__headerbtn{
    top: 10px;
    right: 10px;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close{
    color: #fff !important;
    transition: color .2s;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close:hover{
    color: yellow !important;
  }
</style>
